﻿<DemoPageSectionComponent Id="Charts-Axes-AxesCommon-ConstantLines">
    <DemoChildContent>
        <DxChart T="GlobalTemperatureIndexInfo"
                 Data="Data"
                 Width="100%"
                 Height="500px">
            <DxChartArgumentAxis TickInterval="10">
                <DxChartAxisTitle Text="Year" />
                <DxChartAxisLabel Format="ChartElementFormat.Decimal()" />
            </DxChartArgumentAxis>
            <DxChartValueAxis>
                <DxChartAxisTitle Text="Temperature Anomaly, °C" />
                <DxChartConstantLine Value="0" Width="1">
                    <DxChartConstantLineLabel Text="Zero Level"
                                              VerticalAlignment="VerticalAlignment.Center"
                                              Position="RelativePosition.Inside">
                        <DxChartFont Opacity="0.85" Weight="600"/>
                    </DxChartConstantLineLabel>
                </DxChartConstantLine>
                <DxChartConstantLine Value="Min" Width="1">
                    <DxChartConstantLineLabel Text=@($"Minimum = {Min}")
                                              VerticalAlignment="VerticalAlignment.Center"
                                              Position="RelativePosition.Inside">
                        <DxChartFont Opacity="0.85" Weight="600"/>
                    </DxChartConstantLineLabel>
                </DxChartConstantLine>
                <DxChartConstantLine Value="Max" Width="1">
                    <DxChartConstantLineLabel Text=@($"Maximum = {Max}")
                                              VerticalAlignment="VerticalAlignment.Center"
                                              Position="RelativePosition.Inside">
                        <DxChartFont Opacity="0.85" Weight="600"/>
                    </DxChartConstantLineLabel>
                </DxChartConstantLine>
            </DxChartValueAxis>
            <DxChartTitle Text="Global Land-Ocean Temperature Index" />
            <DxChartLineSeries T="GlobalTemperatureIndexInfo"
                               TArgument="int"
                               TValue="double"
                               ArgumentField="info=>info.Year"
                               ValueField="info=>info.Value"
                               Color="@(System.Drawing.Color.FromArgb(150, 130, 130, 130))"
                               Name="Annual mean">
				<DxChartSeriesPoint Visible="false" />
			</DxChartLineSeries>
            <DxChartSplineSeries T="GlobalTemperatureIndexInfo"
                               TArgument="int"
                               TValue="double"
                               ArgumentField="info=>info.Year"
                               ValueField="info=>info.LowessValue"
                               Name="Lowess smoothing">
				<DxChartSeriesPoint Visible="false" />
			</DxChartSplineSeries>
            <DxChartTooltip Enabled="true"/>
            <DxChartLegend Position="RelativePosition.Outside"
                           VerticalAlignment="VerticalEdge.Bottom"/>
        </DxChart>

        @code {
            const double Max = 1.02;
            const double Min = -0.49;
            IEnumerable<GlobalTemperatureIndexInfo> Data;
            @inject IGlobalTemperatureIndexDataProvider DataProvider

            protected override async Task OnInitializedAsync() {
                Data = await DataProvider.GetDataAsync();
            }
        }
        <div class="credits-title">NASA Global Climate Change</div>
    </DemoChildContent>
</DemoPageSectionComponent>


